"use client";
import React from "react";
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
 
const links = [
  {
    sheng: "新疆维吾尔自治区",  // 修改省份名称
    name: "乌鲁木齐市",        // 修改城市名称
    url: "/baoming/xinjiangsheng/xinjiang",  // 修改基础路径
  },
  {
    sheng: "新疆维吾尔自治区",
    name: "克拉玛依市",
    url: "/baoming/xinjiangsheng/xinjiang",
  },
  {
    sheng: "新疆维吾尔自治区",
    name: "吐鲁番市",
    url: "/baoming/xinjiangsheng/xinjiang",
  },
  {
    sheng: "新疆维吾尔自治区",
    name: "哈密市",
    url: "/baoming/xinjiangsheng/xinjiang",
  },
  {
    sheng: "新疆维吾尔自治区",
    name: "昌吉回族自治州",
    url: "/baoming/xinjiangsheng/xinjiang",
  },
  {
    sheng: "新疆维吾尔自治区",
    name: "博尔塔拉蒙古自治州",
    url: "/baoming/xinjiangsheng/xinjiang",
  },
  {
    sheng: "新疆维吾尔自治区",
    name: "巴音郭楞蒙古自治州",
    url: "/baoming/xinjiangsheng/xinjiang",
  },
  {
    sheng: "新疆维吾尔自治区",
    name: "阿克苏地区",
    url: "/baoming/xinjiangsheng/xinjiang",
  },
  {
    sheng: "新疆维吾尔自治区",
    name: "克孜勒苏柯尔克孜自治州",
    url: "/baoming/xinjiangsheng/xinjiang",
  },
  {
    sheng: "新疆维吾尔自治区",
    name: "喀什地区",
    url: "/baoming/xinjiangsheng/xinjiang",  
  },
  {
    sheng: "新疆维吾尔自治区",
    name: "和田地区",
    url: "/baoming/xinjiangsheng/xinjiang",
  },
  {
    sheng: "新疆维吾尔自治区",
    name: "伊犁哈萨克自治州",
    url: "/baoming/xinjiangsheng/xinjiang",
  },
  {
    sheng: "新疆维吾尔自治区",
    name: "塔城地区",
    url: "/baoming/xinjiangsheng/xinjiang",
  },
  {
    sheng: "新疆维吾尔自治区",
    name: "阿勒泰地区",
    url: "/baoming/xinjiangsheng/xinjiang",
  },
];
 
export default function FriendlyLinks() {
  return (
    <section className="py-12 bg-[#F5F5F5]">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-1 text-red-600">
          新疆维吾尔自治区网络主播合规培训报名入口
        </h2>
        <p className="text-xl text-center mb-4 text-red-600 mt-4">
          请参加培训的学员，按照所在地级市/地区/自治州报名，并写明招生老师或班主任的姓名
        </p>
        
        <div className="overflow-x-auto mt-8">
          <table className="w-full text-center">
            <tbody>
              {[...Array(Math.ceil(links.length / 11))].map((_, rowIndex) => (
                <tr key={rowIndex}>
                  {links.slice(rowIndex * 11, (rowIndex + 1) * 11).map((link, index) => (
                    <td key={index} className="px-2 py-1">
                      <Link
                        href={{
                          pathname: link.url,
                          query: {
                            sheng: encodeURIComponent(link.sheng),
                            city: encodeURIComponent(link.name),
                          }
                        }}
                        passHref
                        legacyBehavior
                      >
                        <a className="text-black hover:text-blue-800 transition-colors">
                          {link.name}
                        </a>
                      </Link>
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  )
}